<template>
  <div class="main hiddenScroll">
    <LayoutContainer>
      <div class="search">
        <Search></Search>
        <div class="icon-container">
          <i class="iconfont icon-xianxingtubiaozhizuomoban-25 icon"></i>
          <el-dropdown style="outline: unset !important">
            <span class="el-dropdown-link">
              更多操作
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="$router.push('/shop/managegoods')">
                  个人中心
                </el-dropdown-item>
                <el-dropdown-item @click="$router.push('/shop/shopcart')">购物车</el-dropdown-item>
                <el-dropdown-item @click="$router.push('/shop/order')">我的订单</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <el-container>
        <el-header>
          <div class="header">
            <el-menu class="el-menu-vertical-demo">
              <el-menu-item
                v-for="(item, i) in menusList"
                :index="`${i}`"
                @click="searchItem(item.title)"
              >
                <span>{{ item.title }}</span>
                <el-icon>
                  <arrow-right />
                </el-icon>
              </el-menu-item>
            </el-menu>
            <el-carousel :interval="4000" trigger="click" height="400px">
              <el-carousel-item v-for="item in photosItem" :key="item">
                <h3 text="2xl" justify="center">
                  <el-image style="width: 100%; height: 100%" :src="item.photos" fit="scale-down" />
                </h3>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-header>
        <el-main>
          <!-- 新鲜好物 -->
          <LineItem>
            <template #header-slot>
              <div class="title-slot">猜您喜欢</div>
              <div class="title-slot-small">价格优惠 品质保证</div>
            </template>
            <template #main>
              <GoodItem
                v-show="goodsList.length > 0"
                v-for="(item, index) in goodsList"
                :key="index"
                :obj="item"
              ></GoodItem>
            </template>
          </LineItem>
          <el-empty v-if="goodsList.length === 0" description="没有更多商品" />
        </el-main>
      </el-container>
    </LayoutContainer>
  </div>
</template>

<script setup>
import LayoutContainer from '@/layout/LayoutContainer.vue'
import LineItem from './components/LineItem.vue'
import GoodItem from './components/GoodsItem.vue'
import Search from '../../components/Search.vue'
import { getGoodsRandom } from '@/api/shop'
import { onMounted, ref } from 'vue'
import { startLoading, stopLoading } from '@/utils/loading'
import { useRouter } from 'vue-router'

const router = useRouter()

// 轮播图展示
const photosItem = [
  {
    search: '',
    photos: 'src/assets/photos1.jpg',
  },
  {
    search: '',
    photos: 'src/assets/photos2.jpg',
  },
  {
    search: '',
    photos: 'src/assets/photos3.jpg',
  },
]

// 菜单栏
const menusList = [
  {
    title: '节能家电',
    path: '',
  },
  {
    title: '节能建材',
    path: '',
  },
  {
    title: '新能源出行工具',
    path: '',
  },
  {
    title: '可再生能源产品',
    path: '',
  },
  {
    title: '碳节能环保产品',
    path: '',
  },
  {
    title: '绿色办公',
    path: '',
  },
  {
    title: '智慧照明',
    path: '',
  },
]

// 跳转搜索
const searchItem = (search) => {
  router.push({ path: `/search/${search}` })
}

// 商品列表
const goodsList = ref([])

//获取商品数据
const getGoods = async () => {
  startLoading()
  const { data } = (await getGoodsRandom(1)).data
  stopLoading()
  goodsList.value = data.data
}

onMounted(() => {
  getGoods()
})
</script>

<style scoped less="scss">
.main {
  .layout-container {
    display: flex;
    flex-direction: column;

    .search {
      display: flex;
      justify-content: center;
      align-items: center;

      position: relative;
      background-color: #f5faf6;

      .icon-container {
        position: absolute;
        right: 7%;

        display: flex;
        align-items: center;
        gap: 8px;

        margin: 15px 0 0 0;

        .icon {
          font-size: 32px;
          cursor: pointer;
        }
      }
    }

    .el-container {
      display: flex;
      justify-content: center;
      align-items: center;

      margin-top: 20px;
      background-color: #f5faf6;

      .el-header {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 450px;
        background-color: #f5faf6;

        .header {
          display: flex;

          .el-menu {
            width: 200px;
            margin-right: 1px;

            .el-menu-item {
              display: flex;
              justify-content: center;

              position: relative;

              color: gray;

              .el-icon {
                position: absolute;
                right: 3%;
              }
            }
          }

          .el-carousel {
            width: 900px;
            height: 400px;
            background-color: #f5faf6;
          }
        }
      }
    }
  }
}
</style>
